<template>
  <div style="border: 1px solid #dcdfe6; margin-top: 10px;z-index: 999999">
    <Toolbar
      style="border-bottom: 1px solid #dcdfe6"
      :editor="editor"
      :mode="mode"
      :default-config="toolbarConfig"
    />
    <!-- 编辑器 -->
    <Editor
      v-model="htmlContent"
      style="overflow-y: hidden"
      :style="{height:height}"
      :mode="mode"
      :default-config="editorConfig"
      @onChange="onChange"
      @onCreated="onCreated"
    />
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="400px"
      :before-close="handleClose">
      <el-progress :percentage="percentage" />
    </el-dialog>
  </div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css'
import { getToken } from '@/utils/auth'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { Boot } from '@wangeditor/editor'
import attachmentModule from '@wangeditor/plugin-upload-attachment'
if (Boot.plugins.length < 13) {
  Boot.registerModule(attachmentModule)
}
export default {
  components: { Editor, Toolbar },
  props: {
    value: {
      type: String,
      default() {
        return null
      }
    },
    // 模式  simple 简洁模式  default 默认模式
    mode: {
      type: String,
      default() {
        return 'default'
      }
    },
    catalog: {
      type: String,
      required: true
    },
    height: {
      type: String,
      default() {
        return '400px'
      }
    },
    placeholder: {
      type: String,
      default() {
        return '请输入内容...'
      }
    }
  },
  data() {
    var uploadConfig = {
      fieldName: 'file',
      maxFileSize: 5 * 1024 * 1024,
      maxNumberOfFiles: 10,
      meta: {
      },
      metaWithUrl: false,
      headers: {
        'Access-Token': getToken(),
        'ProjectsId': this.constants.PROJECTS_ID,
        'App-Id': this.constants.APP_ID,
        'App-Key': this.constants.APP_KEY
      },
      server: this.$FILE_SERVER + '/file/upload?catalogId=' + this.catalog,
      withCredentials: false,
      timeout: 30 * 1000,
      onBeforeUpload: (file) => {
        this.dialogVisible = true
        for (var item in file) {
          this.dialogTitle = file[item].name
        }
        return file
      },
      onProgress: (progress) => {
        this.percentage = progress
      },
      onSuccess: (file, res) => {
        setTimeout(() => {
          this.dialogVisible = false
        }, 1000)
      },
      onFailed: (file, res) => {
        this.handleFailed(file, res.data ? res.data : res.message)
      },
      onError: (file, err, res) => {
        this.handleFailed(file, err.toLocaleString())
      }
    }
    return {
      dialogTitle: '文件上传进度',
      dialogVisible: false,
      percentage: 0,
      editor: null,
      // htmlContent: null,
      toolbarConfig: {
        insertKeys: {
          index: 24, // 自定义插入的位置
          keys: ['uploadAttachment'] // “上传附件”菜单
        }
      },
      editorConfig: {
        placeholder: this.placeholder,
        hoverbarKeys: {
          attachment: {
            menuKeys: ['downloadAttachment']
          }
        },
        MENU_CONF: {
          uploadImage: {
            allowedFileTypes: ['image/*'],
            ...uploadConfig,
            customInsert: (res, insertFn) => {
              var data = res.data
              insertFn(this.global.getFileView(data.uuid), data.originalName, this.global.getFileView(data.uuid))
            }
          },
          uploadVideo: {
            allowedFileTypes: ['video/*'],
            ...uploadConfig,
            customInsert: (res, insertFn) => {
              var data = res.data
              insertFn(this.global.getFileView(data.uuid))
            }
          },
          uploadAttachment: {
            ...uploadConfig,
            customInsert: (res, file, insertFn) => {
              var data = res.data
              insertFn(`附件-${file.name}`, this.global.getFileView(data.uuid))
              setTimeout(() => {
                this.dialogVisible = false
              }, 1000)
            }
          }
        }
      }
    }
  },
  computed: {
    htmlContent: {
      set(value) {
        this.$emit('input', value)
      },
      get() {
        return this.value
      }
    }
  },
  mounted() {
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy()
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    onCreated(editor) {
      this.editor = Object.seal(editor)
    },
    onChange(editor) {
      this.htmlContent = editor.getHtml()
    },
    handleFailed(file, message) {
      this.msgWarning(`文件${file.name}上传失败，失败原因：${message}`)
    }
  }

}
</script>
